
<!-- 自定义组件 -->
<template>
    <el-card class="box-card">
        <div class="model-sysLog">
            <!-- 搜索栏 表单组件 -->
            <el-form :inline="true" :model="queryFormData" class="demo-form-inline">
                <el-form-item label="用户名">
                    <el-input v-model="queryFormData.userName" placeholder="用户名" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="操作内容">
                    <el-input v-model="queryFormData.operation" placeholder="操作内容" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList(1)">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格组件 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="username" label="用户名称"> </el-table-column>
                <el-table-column prop="operation" label="操作内容"> </el-table-column>
                <el-table-column prop="method" label="方法名称"></el-table-column>
                <el-table-column prop="params" label="参数"></el-table-column>
                <el-table-column prop="time" label="操作耗时(毫秒)"></el-table-column>
                <el-table-column prop="ip" label="操作IP"></el-table-column>
                <el-table-column prop="createDate" label="创建时间"></el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
                layout="total, sizes, prev, pager, next, jumper" style="margin-top:30px;">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'sysLog',
    data() {
        return {
            //查询的 表单数据
            queryFormData: {
                userName: "",
                operation: ""
            },
            //表格数据
            tableData: [],
            pageIndex: 1,
            pageSize: 5,
            totalCount: 0,//总条数
            dataListLoading: false, //表格数据查询处理中，避免频繁重复点击
        }
    },
    methods: {
        //查询事件
        getDataList(pageIndex) {
            /** 校验 重复操作 之后可以使用loading层解决*/
            if (this.dataListLoading) {
                //如果正在处理查询，则忽略本次点击
                return;
            }
            this.dataListLoading = true; //查询处理中
            /** 解决 页码虚高的问题  */
            //如果是点击查询按钮进来的，则从第一页开始查询，解决问题：之前查询了第n页数据，但是新输入的条件没有那么多数据，造成点击查询后显示第n页无数据的问题
            if (pageIndex) {
                this.pageIndex = pageIndex;
            }
            //声明params查询的参数
            const params = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                userName: this.queryFormData.userName,
                operation: this.queryFormData.operation
            };
            //debugger;
            //请求查询系统操作日志列表数据
            this.$http.get("/sys/sysLog/list", { params: params }).then((res) => {
                //console.log("查询系统角色,服务返回", res);
                this.tableData = res.data.data.list;  //表格数据
                this.totalCount = res.data.data.totalCount;  //总条数
            }).catch(function (error) {
                console.log(error);
            })
            this.dataListLoading = false; //查询处理结束
        },
        // 分页-切换页容量
        sizeChangeHandle(pageSize) {
            this.pageSize = pageSize; //切换 pageSize
            this.pageIndex = 1; //切换size后跳转到第一页
            this.getDataList(); //刷新表格数据
        },
        // 分页-跳转指定页码
        currentChangeHandle(pageIndex) {
            this.pageIndex = pageIndex; //跳转到指定页
            this.getDataList(); //刷新表格数据
        }
    },
    // mounted在模板渲染成html后调用
    mounted() {
        //渲染页面后自动查询系统日志数据
        this.getDataList();
    }
}
</script>